<html xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" >
<link th:href="@{/layui/css/layui.css}" rel="stylesheet"/>
<head th:include="admin/common/resource ::commonHead('添加课程')" ></head>
<style>
    .layui-form-item .layui-input-inline{
        margin-left: 30px;
    }
    .layui-form-item .layui-form-label{
        padding: 2px 0px;
    }
</style>
<script>
    function loadPage(url) {
        window.location.href = url;
    }
</script>
<head>
    <title>添加</title>
</head>

<body>

<div class="container" style="margin-left: 0px">
    <div class="toolbar btn-group-sm" role="toolbar" >
        <h6 style="margin-top: 10px;margin-bottom: 20px" > 后台管理系统 / 课程管理 / 添加课程 </h6>
        <div class="btn-group btn-group-toggle" data-toggle="buttons" style="margin-bottom: 16px">
            <label shiro:hasPermission="course:list" class="btn btn-secondary btn-sm" onclick="loadPage('/admin/course/list')">
                <input type="radio" name="options" id="option1" autocomplete="off" checked> 课程列表
            </label>

            <label shiro:hasPermission="course:edit" class="btn btn-secondary btn-sm active">
                <input type="radio" name="options" id="option3" autocomplete="off"> 编辑课程
            </label>
        </div>
    </div>

    <form class="layui-form"  enctype="multipart/form-data">
        <input type="hidden" name="id" th:value="${course.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">课程名称</label>
            <div class="layui-input-block">
                <input type="text" name="title" th:value="${course.title}" required  lay-verify="required" placeholder="请输入课程标题"  class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属分类</label>
            <div class="layui-input-block">
                <select name="cateId">
                    <option th:value="${cate.id}" th:each="cate:${categories}" th:text="${cate.cName}" th:selected="${cate.id} == ${course.cateId}"  ></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">文本域</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入内容" class="layui-textarea" th:text="${course.description}" ></textarea>
            </div>
        </div>

        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">复选框</label>-->
            <!--<div class="layui-input-block">-->
                <!--<input type="checkbox" name="like[write]" title="写作">-->
                <!--<input type="checkbox" name="like[read]" title="阅读" checked>-->
                <!--<input type="checkbox" name="like[dai]" title="发呆">-->
            <!--</div>-->
        <!--</div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">付费</label>
            <div class="layui-input-block">
                <input type="radio" name="cost" value="1" title="收费" th:checked="${course.cost} == 1" >
                <input type="radio" name="cost" value="0" title="免费" th:checked="${course.cost}==0" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">价格</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input"  name="price" th:value="${course.price}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <input type="checkbox" name="state" lay-skin="switch"  th:checked="${course.status} == 1" >
            </div>
        </div>
        <!--<div class="layui-form-item">-->
            <!--<label class="layui-form-label">排序</label>-->
            <!--<div class="layui-input-inline">-->
                <!--<input type="number" name="localSort" required lay-verify="required" placeholder="请输入排序"  class="layui-input">-->
            <!--</div>-->
            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
        <!--</div>-->

        <div class="layui-form-item" >
            <label for="file">课程图标</label>
            <div class="layui-input-block">
                <div class="layedit-tool-image" id="imageBox" style="margin-bottom: 10px" >
                    <img th:src="${imageService+course.picture}" style="height: 80px" alt="">
                </div>
                <button type="button" class="layui-btn" id="file">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <input id="image" type="hidden" name="picture" th:value="${course.picture}">
        </div>

        <div class="layui-form-item" >
            <label for="fileThumb">缩略图</label>
            <div class="layui-input-block">
                <div class="layedit-tool-image" id="thumbBox" style="margin-bottom: 10px" >
                    <img th:src="${imageService+course.thumb}" style="height: 80px" alt="">
                </div>
                <button type="button" class="layui-btn" id="fileThumb">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                </button>
            </div>
            <input id="thumb" type="hidden" name="thumb" th:value="${course.thumb}">
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">图文内容</label>
            <div class="layui-input-block">
                <script id="content" name="content"  th:utext="${course.content}" ></script>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>

</body>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/ueditor.all.js}"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" th:src="@{/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script th:src="@{/layui/layui.all.js}"></script>
<script>

    window.onload = function (ev) {
        var ue = UE.getEditor('content');
    }

    layui.use('upload', function(){
        var upload = layui.upload;

        //执行实例
        var uploadInst = upload.render({
             elem: '#file' //绑定元素
            ,url: '/admin/course/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                if(res.status == 1){
                   $("#image").val(res.path)
                   $("#imageBox").html("<image style='height: 80px' src='[[${imageService}]]/"+res.path+"' >")
                }else{
                    lay.msg("上传失败");
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });

        //上传缩略图
        var uploadThumb = upload.render({
            elem: '#fileThumb' //绑定元素
            ,url: '/admin/course/upload' //上传接口
            ,done: function(res){
                //上传完毕回调
                if(res.status == 1){
                    $("#thumb").val(res.path)
                    $("#thumbBox").html("<image style='height: 80px' src='[[${imageService}]]/"+res.path+"' >")
                }else{
                    lay.msg("上传失败");
                }
            }
            ,error: function(){
                //请求异常回调
            }
        });
    });

    //Demo
    layui.use('form', function(){
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            console.log(data)
            $.ajax({
                url: "/admin/course/save",
                type:'post',
                contentType:'application/json;charset=UTF-8',
                data: JSON.stringify({
                    id:data.field.id,
                    title:data.field.title,
                    cateId:data.field.cateId,
                    description:data.field.description,
                    content:data.field.content,
                    price:data.field.price,
                    cost:data.field.cost,
                    thumb:data.field.thumb,
                    picture:data.field.picture,
                    status:data.field.state=='on'?1:0
                }),
                success: function (res) {
                    if(res.code == 1){
                        layer.msg("保存成功!",function () {
                            window.location.href="/admin/course/list";
                        },2000)
                    }
                },
                error:function (err) {
                    layer.msg("保存失败")
                }
            })
            return false;
        });
    });
</script>
</html>